<template>

        <transition name="fade">
            <div v-if="tips.t_show" class="show_msg">
                <span class="show_span">{{tips.t_msg}}</span>
            </div>
        </transition>

</template>

<script type="text/javascript">
    export default {
        props:['tips'],
    }
</script>

<style scoped>
    .show_msg{
        width:100%;
        height:35px;
        text-align:center;
        position:fixed;
        top: 43%;
        z-index: 999;
    }
    .show_span{
        display: inline-block;
        height: 35px;
        padding: 0 15px;
        line-height: 35px;
        background:rgba(0,0,0,0.8);
        border-radius: 50px;
        color: #fff;
        font-size: 1em;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-active {
        opacity: 0;
    }
</style>